<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>PrimeFaces - ShowCase</title>
            </f:facet>

            <link type="text/css" rel="stylesheet" href="" />
            <link type="text/css" rel="stylesheet" href="" />

            <style type="text/css">
                .ui-layout-north {
                    z-index:20 !important;
                    overflow:visible !important;;
                }

                .ui-layout-north .ui-layout-unit-content {
                    overflow:visible !important;
                }
                body{
                margin: 0;
	            padding: 0;
	            font-family: "Arial";
	            font-size: 10px;
                }
            </style>
        </h:head>


        <h:body>
          <h:form>
            <p:layout fullPage="true" >

                <p:layoutUnit id="top" position="north" size="100" >

                     <h:panelGrid columns="3">
                     <p:graphicImage value="/images/LogoChimu.jpg" width="190px" height="80px"/>  
                     <center><p:graphicImage value="/images/fondos.jpg" width="100%" height="80px"/></center>
                     </h:panelGrid>
                </p:layoutUnit>

               

                <p:layoutUnit id="left" position="west" size="200" resizable="true" closable="true" collapsible="true" header="Options">
                    <p:accordionPanel activeIndex="0" autoHeight="false">
                        <p:tab title="Menu 1">
                            <br />
                            <!--p:calendar mode="inline" navigator="none"/-->
                            <br />
                        </p:tab>

                        <p:tab title="Menu 2">
                            <h:outputText value="Menu 2 Content" />
                        </p:tab>

                        <p:tab title="Menu 3">
                            <h:outputText value="Menu 3 Content" />
                        </p:tab>
                    </p:accordionPanel>
                </p:layoutUnit>

                

                <p:layoutUnit id="center" position="center" style="width:100%; height:100%;">
                  <p:dataTable var="car" value="#{tableBeans.carsSmall}"  paginator="true" rows="5"
                  emptyMessage="No cars found with given criteria" widgetVar="carsTable">
                    
                    <f:facet name="header">  
            			ENTREGA DE PRESENTE A SOCIOS POR APORTE 
                    </f:facet>
                    
                    <f:facet name="header">
			            <p:outputPanel>
			                <h:outputText value="" />
			                <p:inputText id="globalFilter" onkeyup="carsTable.filter()" style="width:150px" />
			            </p:outputPanel>
			        </f:facet>
                  
				    <p:column filterBy="#{car.randomYear}" >
				    <f:facet name="header">
				    <h:outputText value="CODIGO" />
				    </f:facet>
				    <h:outputText value="#{car.randomYear}" ></h:outputText>
				    </p:column>
				    
					<p:column filterBy="#{car.randomColor}" >
					<f:facet name="header">
					<h:outputText value="NOMBRE Y APELLIDOS" />
					</f:facet>
					<h:outputText value="#{car.randomColor}" />
					</p:column>
					
					<p:column filterBy="#{car.randomManufacturer}" >
					<f:facet name="header">
					<h:outputText value="DESCRIPCION DE PRESENTE" />
					</f:facet>
					<h:outputText value="#{car.randomManufacturer}"></h:outputText>
					</p:column>
					
					<p:column filterBy="#{car.randomColor}" >
					<f:facet name="header">
					<h:outputText value="CUENTA" />
					</f:facet>
					<h:outputText value="#{car.randomColor}" />
					</p:column>
					
					<p:column filterBy="#{car.randomManufacturer}" >
					<f:facet name="header">
					<h:outputText value="OPERACION REALIZADA" />
					</f:facet>
					<h:outputText value="#{car.randomManufacturer}" />
					</p:column>
					
					<p:column filterBy="#{car.randomColor}" >
					<f:facet name="header">
					<h:outputText value="FECHA" />
					</f:facet>
					<h:outputText value="#{car.randomColor}" />
					</p:column>					
					
					<p:column filterBy="#{car.randomYear}" >
					<f:facet name="header">
					<h:outputText value="FIRMA" />
					</f:facet>
					<h:outputText value="#{car.randomYear}" />
					</p:column>
					
					<p:column filterBy="#{car.randomYear}">
					<f:facet name="header">
					<h:outputText value="HORA" />
					</f:facet>				
					<h:outputText value="#{car.randomYear}"></h:outputText>	
					</p:column>
					
					<p:column>
					<f:facet name="header">
					<h:outputText value="" />
					</f:facet>				
					
					<p:commandLink id="basicc" value="Más" onclick="dlg1.show();" type="button"></p:commandLink>
					</p:column>
					
				</p:dataTable>
                </p:layoutUnit>

            </p:layout>

           <p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1"  >
				    <p:panel>
				     <p:panelGrid columns="4">
				     
				     </p:panelGrid>
				   </p:panel>
		</p:dialog>
         </h:form>
        </h:body>

    </f:view>
  </html>